<template>
	<view class="xinjiankehu-box">
		
		<view class="box">
			<view class="row">
				<view class="left">
					姓名
				</view>
				<input type="text" value=""  v-model="news_Tit" placeholder="请填写您的姓名" />

			</view>
			<view class="row">
				<view class="left">
					性别
				</view>
				<view class="uni-list-cell-db chooseInp">
					<!-- <picker @change="bindPickerChange" :value="index" :range="array"> -->
					<picker @change="bindPickerChange" :range="array">
						<view class="uni-input">{{oper_Id}}</view>
					</picker>
				</view>
			</view>
			<view class="row">
				<view class="left">
					手机号
				</view>
				<input type="text" value="" v-model="author" placeholder="请输入手机号" />
			</view>
			<view class="row">
				<view class="left" >
					生日
				</view>
				<view class="uni-list-cell-db chooseInp">
					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
						<view class="uni-input">{{date}}</view>
					</picker>
				</view>
				
			</view>
			<view class="row">
				<view class="left">
					所在地区
				</view>
				<view class="uni-list-cell-db chooseInp">
					<view class="adr-choose"  @click="showMulLinkageTwoPicker">
						<input type="text" value="" placeholder="请选择地区" :value="textValue" disabled />
						<!-- <label class="iconfont" @click="showMulLinkageTwoPicker">&#xe640;</label> -->
					</view>
					<!-- <button type="default" @click="showMulLinkageTwoPicker">恩济</button> -->
					<mpvue-picker :themeColor="themeColor" ref="mpvuePicker" :mode="mode" :deepLength="deepLength" :pickerValueDefault="pickerValueDefault"
					@onConfirm="onConfirm" @onCancel="onCancel" :pickerValueArray="pickerValueArray"></mpvue-picker>
					
				</view>
			</view>
			<view class="questionBox">
				<view class="question" @click="addUserMsg">
					<label class="iconfont label">&#xe652;</label>保存
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import global from '../../../../components/tool/homePageQuery.vue';
	import mpvuePicker from '../../../../components/mpvue-picker/mpvuePicker.vue';
	import mpvueCityPicker from '../../../../components/mpvue-citypicker/mpvueCityPicker.vue'
	import cityData from '../../../../common/city.data.js';
	export default {
		components: {
			mpvuePicker,
			mpvueCityPicker
		},
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				oper_Id:'请选择性别',
				author:'',
				addr:'',
				array: ['男', '女'],
				date:'请选择日期',
				token:uni.getStorageSync('token_key'),
				news_Tit:'',
				defaultTipSex:'请选择',
				defaultTipDate:'请选择',
				mulLinkageTwoPicker: cityData,
				cityPickerValueDefault: [0, 0, 1],
				themeColor: '#007AFF',
				pickerText: '',
				textValue:'',
				mode: '',
				deepLength: 1,
				pickerValueDefault: [0],
				pickerValueArray:[],
				index:'',
			};
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods:{
			onCancel(e) {
				console.log(e)
			},
			onConfirm(e) {
				// console.log(e.label);
				this.textValue = e.label;
				console.log("所在地区======"+e.label);
				this.addr =e.label;
			},
			// 选择城市
			showMulLinkageTwoPicker() {
				this.pickerValueArray = this.mulLinkageTwoPicker
				this.mode = 'multiLinkageSelector'
				this.deepLength = 2
				this.pickerValueDefault = [0, 0]
				this.$refs.mpvuePicker.show()
			},
			bindPickerChange: function(e) {
				//console.log('picker发送选择改变，携带值为', e.target.value)
				this.index = e.target.value
				this.oper_Id = this.array[this.index];
				this.defaultTipSex='';
			},
			bindDateChange: function(e) {
				this.date = e.target.value
				this.defaultTipDate='';
			},
			tipMessage(mesTip){
				console.log("######"+mesTip)
				uni.showToast({
					title: mesTip,
					icon: 'none',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
				return;
			},
			addUserMsg(){ 
				var mesTip ="";
				var isWrite=true;
				
				if(this.addr==''){
					mesTip='请输入所在地区';
					isWrite= false;
				}
				
				if(this.date=='' || this.date=='请选择日期'){
					mesTip='请选择生日';
					isWrite= false;
				}
				
				if(this.author==''){
					mesTip='请输入手机号';
					isWrite= false;
				}
				
				if(this.oper_Id=='' || this.oper_Id=='请选择性别'){
					mesTip='请选择性别';
					isWrite= false;
				}
				
				if(this.news_Tit==''){
					mesTip='请输入您的姓名';
					isWrite= false;
				}
				if(!isWrite){
					this.tipMessage(mesTip);
				}else{
					console.log("新建客户都已填写-------")
					uni.request({
							method: 'POST',
							url: global.api.addCustomer,
							header : {'content-type':'application/x-www-form-urlencoded'},
							data: {
								token: this.token,
								custNo: this.news_Id,
								custName:this.news_Tit,
								sex:this.oper_Id,
								phoneNo:this.author,
								address:this.addr,
								birthDay:this.date
							},
						   
							dataType: 'json',
							success: (res) => {
								console.log("新建客户---"+JSON.stringify(res.data.code)+"-----"+JSON.stringify(res.data.message));
								if(res.data.code =='0'){
									uni.showToast({
										title: '成功',
										icon: 'success',
										success: res => {},
										fail: () => {},
										complete: () => {}
									});
									function sleep2(ms) {
										return new Promise(function(resolve, reject) {
											setTimeout(resolve, ms)
										})
									}
									sleep2(900).then(() => {
										uni.redirectTo({
												url: '../lcs-wodekehu',
												success: res => {},
												fail: () => {},
												complete: () => {}
										});
									})
									
								}else{
									console.log("新建客户")
										uni.showToast({
											title: res.data.message,
											duration:2000,
											icon: 'none',
											success: res => {},
											fail: () => {},
											complete: () => {}
										});
								}
							}, 
							fail: (res) => {
								console.log("..............................................fail");
								console.log("新建客户---"+JSON.stringify(res.data.code)+"-----"+JSON.stringify(res.message));
								console.log(JSON.stringify(res));
								uni.showLoading({
									title: res.message
								});
								setTimeout(function () {
									uni.hideLoading();
								}, 1000);
								//this.text = 'request fail';
							},
							complete: (res) => {
								//停止当前页面下拉刷新。
								//uni.hideNavigationBarLoading();
								uni.stopPullDownRefresh();
							}
						})
				}
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
			
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			}
		}
	}
</script>

<style>
	page {
		background: rgb(255, 255, 255);
	}

	.xinjiankehu-box {
		padding-top: 10px;
		background: #f5f5f5;
	}
	.box{
		padding: 0 30upx;
		background: rgb(255, 255, 255);
	}
	
	.row {
		height: 49px;
		border-bottom: 1px solid rgba(238,238,238,1);
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.row input{
		flex: 3;
	}
	/* .left {
		font-size: 15px;
		margin-right: 20upx;
		flex: 1;
	} */
	
	.left {
		width: 150upx;
		display: flex;
		flex-direction: row;
	
		align-items: center;
		font-size: 15px;
		margin-right: 20upx;
		
	}

	.questionBox {
		display: flex;
		flex-direction: row;
		justify-content: center;
		width: 100%;
		padding: 40upx 0;
		text-align: center;
		margin-top: 50%;

	}

	.question {
		width: 240upx;
		height: 70upx;
		background: linear-gradient(-90deg, rgba(196, 156, 90, 1) 0%, rgba(226, 196, 138, 1) 100%);
		border-radius: 35px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		color: rgb(255, 255, 255);

	}

	.label {
		margin:0 10upx;
	}
	.right{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		flex: 3;
		color: #CCCCCC;
	}
	.adr-choose input {
			float: left;
		}
		.adr-choose label {
			float: right;
			margin-right: 20upx;
		}
		.chooseInp {
			flex: 3;
		}
	
</style>
